<template>
  <div class="myOreders" style="height:100%;">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
    <van-tabs v-model:active="active" @change="tabchange">
      <van-tab
        :title="item.name"
        v-for="(item, index) in tabData"
        :key="index"
        ><div class="content">
          <ul>
            <li v-for="(item, index) in ordersData.data" :key="index">
              <span class="title">{{ item?.course_classify_title }}</span>
              <p class="desc">
                <div class="z">{{ item?.shop_name }}</div>
                <div class="y">{{item.pay_states==1?'待支付':item.pay_states==8?'待收讲义':item.pay_states==7?'已完成':item.pay_states==3?'已取消':''}}</div>
              </p>
              <p class="time">{{new Date(item.end_time).toLocaleString()}}~{{new Date(item.start_time).toLocaleString()}}</p>
              <div class="bottom">
                <div class="l">
                  实付款:<b>￥{{ item.price }}</b>
                </div>
                <div class="r">
                  <button>马上学习</button>
                  <button>去评价</button>
                </div>
              </div>
            </li>
          </ul>
        </div></van-tab
      >
      <van-empty
        v-show="ordersData.data?.length <= 0"
        image=" https://wap.lexuemiao.com/img/empty.503e5ccb.png"
        image-size="80"
        description="暂无订单内容"
      />
    </van-tabs>
  </div>
</template>
<script>
import { toRefs, reactive, onMounted } from 'vue'
import { getOredrApi } from "@/http/api";
import { useCounterStore } from "@/stores/counter";
export default {
  setup(props) {
    const store = useCounterStore();
    const data = reactive({
     active:0,
      tabData: [
    { name: "全部", pay_states: "" },
    { name: "待支付", pay_states: "1" },
    { name: "待收讲义", pay_states: "8" },
    { name: "已完成", pay_states: "7" },
    { name: "已取消", pay_states: "3" },
  ],
    ordersData: [],
    // a:new Date().toLocaleString
    })
 onMounted(() => {
  getOrders({
    user_id: store.res.id,
    pay_states: "",
  });
  console.log(store.res.id);
})
const getOrders = async (obj) => {
  const res = await getOredrApi(obj);
  data.ordersData = res;
  console.log('订单',data.ordersData);
}
const tabchange = (e) => {
  getOrders({
    user_id: store.res.id,
    pay_states: data.tabData[e].pay_states,
  });
}
    return {
      ...toRefs(data),
      tabchange,
      getOrders
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
  ul {
    width: 98%;
    padding: 10px;
    box-sizing: border-box;
    margin-left: 6px;
    margin-top: 20px;
    li {
      min-height: 240px;
      border-radius: 20px;
      background-color: #fff;
      box-shadow: 0 0 10px 5px #eee;
      margin: 20px;
      padding: 10px 30px;
      margin-bottom: 15px;
      .title {
        background-color: #f15a24;
        color: #fff;
        padding: 6px 12px;
        font-size: 14px;
        border-radius: 20px 0 20px 0;
        margin-left: -28px;
      }
      .desc {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        margin-top: 28px;
        .y{
          width: 20%;
          font-size: 14px;
          color: red;
        }
      }
      .time {
        font-size: 13px;
        color: #ccc;
        margin: 20px 0;
      }
      .info {
        display: flex;
        margin-top: 10px;
        .box {
          display: flex;
          align-items: center;
          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 10px;
          }
          span {
            color: #666;
            font-size: 13px;
            margin-right: 20px;
          }
        }
      }
      .bottom {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .r {
          width: 300px;
          display: flex;
          justify-content: space-between;
          button {
            background-color: #f15a24;
            color: #fff;
            border: none;
            padding: 10px 30px;
            border-radius: 30px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>

